import React from 'react';
import './selectDate.scss';
import { DatePicker, Modal } from 'antd-mobile';
import moment from 'moment';
import { i18n } from 'js/core/i18n';

class SelectDate extends React.Component {
  constructor(props) {
    super(props)
    this.formatText = 'YYYY-MM-DD';
    if (props.mode === 'datetime') {
      this.formatText = 'YYYY-MM-DD HH:mm';
    }
    this.state = {
      begin_date: props.begin_date ? props.begin_date : moment().format(this.formatText),
      end_date: props.end_date ? props.end_date : moment().format(this.formatText),
      visible: false,
    }
  }
  show = () => {
    this.setState({ visible: true })
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      begin_date: nextProps.begin_date ? nextProps.begin_date : moment().format(this.formatText),
      end_date: nextProps.end_date ? nextProps.end_date : moment().format(this.formatText)
    })
  }
  modalDateOnChange = (type, date) => {
    this.state[type] = moment(date).format(this.formatText);
    this.setState({});
  }
  complete = () => {
    this.setState({ visible: false })
    if (this.props.complete && this.state.begin_date && this.state.end_date) {
      this.props.complete(this.state.begin_date, this.state.end_date)
    } else {
      if (this.props.cancel) {
        this.props.cancel()
      }
    }
  }
  onCancel = () => {
    if (this.props.cancel) {
      this.props.cancel()
    }
    this.setState({ visible: false })
  }
  render() {
    let { begin_date, end_date, visible } = this.state;
    let endDate_minDate = this.props.minDate, startDate_maxDate = this.props.maxDate, endDate_MaxDate = this.props.maxDate;
    if (begin_date) {
      if (endDate_minDate) {
        if (new Date(begin_date).getTime() > endDate_minDate.getTime()) {
          endDate_minDate = new Date(begin_date);
        }
      } else {
        endDate_minDate = new Date(begin_date);
      }
    }

    if (end_date) {
      if (startDate_maxDate) {
        if (this.props.mode === 'datetime') {
          if (moment(end_date).valueOf() < moment(startDate_maxDate).valueOf()) {
            startDate_maxDate = new Date(end_date);
          } else {
            startDate_maxDate = new Date(startDate_maxDate);
          }
        } else {
          if (moment(end_date).startOf('day').valueOf() < moment(startDate_maxDate).startOf('day').valueOf()) {
            startDate_maxDate = new Date(end_date);
          } else {
            startDate_maxDate = new Date(startDate_maxDate);
          }
        }

      } else {
        startDate_maxDate = new Date(end_date);
      }
    }

    if (endDate_minDate && startDate_maxDate) {
      if (this.props.mode === 'datetime') {
        if (moment(startDate_maxDate).valueOf() < moment(endDate_minDate).valueOf()) {
          startDate_maxDate = null;
        }
      } else {
        if (moment(startDate_maxDate).startOf('day').valueOf() < moment(endDate_minDate).startOf('day').valueOf()) {
          startDate_maxDate = null;
        }
      }

    }
    if (startDate_maxDate && endDate_MaxDate) {
      if (startDate_maxDate.getTime() > endDate_MaxDate.getTime()) {
        endDate_MaxDate = startDate_maxDate;
      }
    }

    return <div>

      {visible && <Modal
        visible={visible}
        transparent
        maskClosable={false}
        className="modelSelectDate"
        title={this.props.title || i18n.get("时间选择")}
        footer={[{ text: i18n.get('确定'), onPress: this.complete },
        { text: i18n.get('取消'), onPress: this.onCancel }]}
      >
        <div className="flex-col-center modelSelectDateBody">
          <DatePicker extra={i18n.get("请选择")} locale={ {DatePickerLocale:{year:i18n.get("年"), month:i18n.get("月"), day:i18n.get("日"), hour:i18n.get("时"), minute:i18n.get("分")}}} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
            mode={this.props.mode || "date"}
            value={begin_date ? new Date(begin_date) : new Date()}
            onChange={this.modalDateOnChange.bind(this, 'begin_date')}
            minDate={this.props.minDate}
            maxDate={startDate_maxDate}
          >
            <div className="dateInput flex-vcenter">
              <div className="icon_date mr10 ml15"></div>
              <div className="ml15  flex-g-1 text-center">{begin_date ? begin_date : moment().format('YYYY-MM-DD')}</div>
            </div>
          </DatePicker>
          |
      <DatePicker extra={i18n.get("请选择")} locale={ {DatePickerLocale:{year:i18n.get("年"), month:i18n.get("月"), day:i18n.get("日"), hour:i18n.get("时"), minute:i18n.get("分")}}} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
            mode={this.props.mode || "date"}
            value={end_date ? new Date(end_date) : new Date()}
            onChange={this.modalDateOnChange.bind(this, 'end_date')}
            minDate={endDate_minDate}
            maxDate={endDate_MaxDate}
          >
            <div className="dateInput flex-vcenter">
              <div className="icon_date  mr10 ml15"></div>
              <div className="ml15 flex-g-1 text-center">{end_date ? end_date : moment().format('YYYY-MM-DD')}</div>
            </div>
          </DatePicker>
        </div>
      </Modal>}
    </div>
  }
}


class SelectDateComponent extends React.Component {
  onClick = () => {
    this.refs.selectDate.show();
  }
  complete = (begin_date, end_date) => {
    this.props.onChange([begin_date, end_date]);
  }
  render() {
    let value = this.props.value || [];
    return <div className={this.props.className} onClick={this.onClick}>
      <SelectDate ref="selectDate" {...this.props} begin_date={value[0]} end_date={value[1]} complete={this.complete} />
      {this.props.children}
    </div>
  }
}


export { SelectDate, SelectDateComponent };